import {Result, Button, Form, Input, Checkbox, Row, notification, Image} from 'antd';
import BasePage from "../base";
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import React, {useEffect, useState} from "react";
import {useHistory, useModel} from 'umi';
import {Content} from "antd/es/layout/layout";
import request from "umi-request";

export default function LoginPage() {
    const layout = {
        labelCol: {span: 7},
        wrapperCol: {span: 8},
    };
    const tailLayout = {
        wrapperCol: {offset: 7, span: 8},
    };
    const history = useHistory()
    const {initialState} = useModel('@@initialState');

    const [username, setUserName] = useState("")
    const [password, setPassWord] = useState("")


    useEffect(() => {
        if (sessionStorage.getItem("isLogin") === "1") {
            history.push("/")
        }

    })

    const successNotification = type => {
        notification[type]({
            message: 'Success!',
            duration: 2,
            description: 'Login Successfully!',
        });
    };

    const errorNotification = type => {
        notification[type]({
            message: 'Error!',
            duration: 2,
            description:
                'Incorrect account or password!',
        });
    };

    function loginInfo(response) {
        switch (response["errno"]) {
            case "0":
                successNotification('success')
                sessionStorage.setItem("isLogin", "1");
                sessionStorage.setItem("token", response["token"]);
                history.push('/translate')
                break
            default :
                errorNotification('error')
        }
    }

    function handleSubmit() {
        let url = initialState.BACK_END_URL + "login";
        let formData = new FormData();
        formData.append('name', username);
        formData.append('pwd', password);
        request
            .post(url, {
                mode: 'cors',
                body: formData
            })
            .then(function (response) {
                loginInfo(response)
            })
            .catch(function (error) {
                history.push('/500')
            });
    }

    return (
        <BasePage>
            <Content
                className="site-layout"
                style={{padding: '40px 40px', marginTop: 64}}
            >
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{remember: true}}
                >
                    <Form.Item
                        {...tailLayout}
                        name="username"
                        rules={[{required: true, message: 'input your username!'}]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"
                               onChange={e => {
                                   setUserName(e.target.value)
                               }}/>
                    </Form.Item>

                    <Form.Item
                        {...tailLayout}
                        name="password"
                        rules={[{required: true, message: 'input your password!'}]}
                    >
                        <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>}
                                        type="password"
                                        placeholder="Password" onChange={e => {
                            setPassWord(e.target.value)
                        }}/>
                    </Form.Item>

                    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                        <Row justify="space-between">
                            <a href={'/forget'}>忘记密码</a>
                            <a href={'/register'}>注册账号</a>
                        </Row>
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Button block={true} type="primary" htmlType="submit" onClick={handleSubmit}>
                            登 录
                        </Button>
                    </Form.Item>
                </Form>

            </Content>
        </BasePage>
    );
}
